آموزش JavaScript بخش 1
مقدمه :
این آموزش درباره چگونگی کار کردن جاوا اسکریپت در طراحی وب سایت با html و css است
پیشنهاد نویسنده :
در طول آموزش این دوره سعی کنید مثال های گفته شده در هر فصل را پس از پایان فصل به صورت عملی نوشته ، اجرا کنید و نتیجه را ببینید تا یادگیری بهتر و سریعتری داشته باشید و همچنین وب سایتی بهینه
جاوا اسکریپت زبان برنامه نویسی HTML و طراحی وب است
جاوا اسکریپت محبوب ترین زبان برنامه نویسی در جهان است
این مقاله زبان برنامه نویسی جاوا اسکریپت را به شما از پایه تا پیشرفته آموزش می دهد
.جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند
1. HTML برای تعریف محتوای صفحات وب
2. CSS برای مشخص کردن طرح صفحات وب
3. جاوا اسکریپت برای مشخص کردن رفتار صفحات وب
1. جاوا اسکریپت می تواند محتوای HTML را تغییر دهد :
یکی از روش های دسترسی به المان های داخل html گرفتن id با استفاده از متد () getElementById می باشد.
این مثال از این روش برای پیدا کردن یک عنصر html با "id="demo استفاده کرده و محتوای درون عنصر را به Hello JavaScript تغییر می دهد.
document.getElementById("demo").innerHTML = "Hello JavaScript";
مثال :
<body>
<form id="form1" runat="server">
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>
</form>
</body>
2. جاوا اسکریپت می تواند ویژگی های HTML را تغییر دهید
این مثال با استفاده از جاوا اسکریپت ، خصوصیت src از تگ <img > یک تصویر HTML را تغییر می دهد .
<body>
<form id="form1" runat="server">
<img src="pic_bulboff.gif" onclick="changeimg()" width="100" height="150" id="myImage" />
<script>
function changeimg() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
}
else { image.src = "pic_bulbon.gif" }
}
</script>
</form>
</body>
اجرا :
قبل از کلیک
بعد از کلیک
3. جاوا اسکریپت می تواند سبک ها یا استایل های (CSS) ، HTML را تغییر دهید
در مثا ل زیر با استفاده از جاوا اسکریپت ،سبک یک عنصر html را تغییر می دهیم
document.getElementById("demo").style.fontSize = "25px";
مثال :
<body>
<form id="form1" runat="server">
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction()
{
var x = document.getElementById('demo');
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</form>
</body>
4. جاوا اسکریپت می تواند داده ها را اعتبارسنجی (Validate ) کند
جاوا اسکریپت اغلب برای اعتبار سنجی ورودی ها استفاده می شود
مثال :
<body>
<form id="form1" runat="server">
<input id="numb" />
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
x = document.getElementById('numb').value;
if(isNaN(x) || x<1 || x>10)
{
text = "Input not valid";
}
else
{
text = "Input OK";
}
document.getElementById('demo').innerHTML = text;
}
</script>
</form>
</body>
اجرا :
پایان قسمت اول
منابع : http://www.w3schools.com/js/default.asp
کانون تبلیغاتی افراگرافیک
آدرس: تهران-میدان انقلاب-خ آزادی-خ اسکندری-نبش کلهر-دفتر افرا گرافیک
66912056 66562677 66120698 09122246022
http://afragraphic.ir
info@afragraphic.ir
https://telegram.me/afragraphic_ir
http://instagram.com/afragraphic1390
http://facebook.com/AfraGraphic
http://plus.google.com/104048725792771050756
http://youtube.com/channel/UCOKVgQfCKUC0F4z2hoOOhPQ
http://twitter.com/afragraphic
http://ir.linkedin.com/in/afragraphic
http://aparat.com/afragraphic
http://Telegram.me/afragraphic_ir
http://cloob.com/name/afragraphic
:: برچسب‌ها:
آموزش JavaScript ,
آموزش جاوااسکریپت ,
جاوااسکریپت ,
طراحی سایت ,
طراحی وب سایت ,
طراحی سایت ,
بهینه سازی سایت ,
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
